<template>
    <div class="dept-update-dept-container">
        {{context}} {{type}} {{index}}
        <Divider>部门名称</Divider>
        <div class="dept-update-dept-items">
            <input 
                id="department-item"
                class="dept-update-dept-item" 
                type="text" 
                :value="$store.state.user.dept" 
                @blur.prevent="alterDepartment($store.state.user.dept)">
            <div class="dept-update-dept-delete">删除</div>
        </div>
        <Divider>组别/职位名称</Divider>
        <div class="dept-update-dept-items" v-for="(item, index) in $store.state.view.department.group_list" :key="index" >
            <input 
                class="dept-update-dept-item" 
                type="text" 
                :value="item.groupName" 
                ref="item"
                @blur.prevent="alterGroup(item.groupName, index)"
                :disabled="!check(item.groupName)">
            <div 
                class="dept-update-dept-move" 
                v-if="check(item.groupName)" 
                @click="openModal(`移动${item.groupName}`, `确定移动`, 1, item.groupName)">
                移至
            </div>
            <div 
                class="dept-update-dept-delete" 
                v-if="check(item.groupName)" 
                @click="openModal(`删除${item.groupName}`, `确定删除`, 2, item.groupName)">
                删除
            </div>
        </div>
        <div class="dept-update-mkdept-btn" @click="openModal(`新建小组`, '确定', 0)">新增小组</div>
        <Modal
            style="text-align: center"
            v-model="modal.display"
            :title="modal.title"
            :ok-text="modal.btn"
            @on-ok="ok">
            {{tips}}
            <div class="dept-update-mv-group" v-if="flag === 1">
                <RadioGroup v-model="target" vertical style="margin-left: 25px">
                    <Radio v-for="(item, index) in $store.state.info.depts" :key="index" :label="item.deptName">
                        <span>{{item.deptName}}</span>
                    </Radio>
                </RadioGroup>
            </div>
            <div class="dept-update-mkdept" v-if="flag === 0">
                <Input v-model="context" placeholder="请输入小组名称" style="width: 300px" />
            </div>
        </Modal>
    </div>
</template>

<script>

import $ from 'jquery'
import department_request from "@/axios/dept"

export default {
    data() {
        return {
            context: '',
            type: -1,
            target: this.$store.state.user.dept,
            index: -1,
            tips: "删除",
            flag: -1,
            modal: {
                display: false,
                title: "",
                btn: ""
            }
        }
    },
    methods: {
        async alterDepartment(context) {
            let newName = $("#department-item").val()
            if (newName.length > 0 && newName != context) {
                let result = await department_request.axiosSetDept(context, newName)
                if (result == 200) {
                    this.$store.state.user.dept = newName
                }
            }
        },
        async alterGroup(oldName, index) {
            let newName = this.$refs.item[index].value
            if (newName != "" && newName != oldName) {
                let result = await department_request.axiosSetGroup(this.$store.state.user.dept, oldName, newName)
                console.log(result)
            }
        },
        check(name) {
            return name != "部长" && name != "副部长"
        },
        openModal(title, btn, flag, context) {
            this.flag = flag
            this.context = context
            this.modal.display = true
            this.modal.title = title
            this.modal.btn = btn
            switch(flag) {
                case 0: this.tips = ``; this.context = ``;break
                case 1: this.tips = `请选择要移入的部门：`;break
                case 2: this.tips = `你确定要${title}吗？该操作会同时删除相关成员、任务`;break
            }
        },
        ok() {
            switch(this.flag) {
                case 0: {
                    if (this.context === "")
                        return
                    department_request.axiosMkGroup(this.$store.state.user.dept, this.context)
                    break
                }
                case 1: {
                    if (this.context == this.$store.state.user.dept) 
                        return
                    department_request.axiosMvGroup(this.$store.state.user.dept, this.target, this.context)
                    break
                }
                case 2: {
                    department_request.axiosRmGroup(this.$store.state.user.dept, this.context)
                }
            }
        }
    }
}
</script>

<style lang="scss">
@import "@dept/scss/update-dept.scss"
</style>